<template>
    <div>
        <el-card v-if="false" style="margin-top: 20px">
            <filterComponent v-model:filter-data="filterData" @doSearch="onSearch">
                <template #head-button>
                    <el-button type="primary" @click="onShowManual">人工注销</el-button>
                </template>
            </filterComponent>
        </el-card>
        <el-card v-if="false" style="margin-top: 20px">
            <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                            v-model:page-info="pageInfo" @pageChange="onPageChange" show-overflow-tooltip>
                <template #idCardFront>
                    <el-table-column label="身份证正面" width="100">
                        <template #default="scope">
                            <el-image v-if="scope.row.idCardFront" preview-teleported :z-index="10000" fit="cover"
                                      :preview-src-list="[scope.row.idCardFront,scope.row.userPhoto]"
                                      class="w-50px h-50px reset-image"
                                      :src="scope.row.idCardFront"></el-image>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                </template>
                <template #userPhoto>
                    <el-table-column label="本人照片" width="100">
                        <template #default="scope">
                            <el-image v-if="scope.row.userPhoto" preview-teleported :z-index="10000" fit="cover"
                                      :preview-src-list="[scope.row.userPhoto, scope.row.idCardFront]"
                                      class="w-50px h-50px reset-image"
                                      :src="scope.row.userPhoto"></el-image>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                </template>
                <template #status>
                    <el-table-column fixed="right" label="申请状态" width="80">
                        <template #default="scope">
                            <div v-if="scope.row.status !== null" :class="{ 'cursor-pointer': scope.row.status === 2 }"
                                 :style="{ color: statusColor(scope.row.status) }">
                                <div v-if="scope.row.status === 2">
                                    <el-tooltip effect="dark" :content="scope.row.rejectRemark" placement="top">
                                        <div>
                                            {{
                                                statusMap[scope.row.status as keyof typeof statusMap].text
                                            }}
                                        </div>
                                    </el-tooltip>
                                </div>
                                <div v-else>
                                    {{
                                        statusMap[scope.row.status as keyof typeof statusMap].text
                                    }}
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template #default="scope">
                            <div v-if="scope.row.status === 0">
                                <el-button link type="primary" size="small"
                                           @click="onAgree(scope.row.id)">注销
                                </el-button>
                                <el-button link type="danger" size="small"
                                           @click="onReject(scope.row.id)">驳回
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
        <DialogReject v-model:show="showReject" :record-id="recordId" @success="getList"/>
        <DialogCancellation v-model:show="showCancellation"/>
    </div>
</template>
<script lang="ts" setup>
import {onMounted, ref, computed} from 'vue'
import {getLogoutRecordList} from '@/api/tools/accountLogout'
import type {LogoutRecordDto} from '@/api/tools/accountLogout/type'

import {getFilterDataValue} from '@/utils/utils'
import dayjs from 'dayjs'
import {agreeLogout} from '@/api/tools/accountLogout'
import {ElMessageBox} from 'element-plus'

import DialogReject from './components/DialogReject.vue'
import DialogCancellation from './components/DialogCancellation.vue'


const filterData = ref({
    list: {
        idCardNo: {
            label: '员工身份证',
            prop: 'idCardNo',
            value: '',
            placeholder: '请输入员工身份证',
            type: 'input',
        },
        originPhone: {
            label: '手机号',
            prop: 'originPhone',
            value: '',
            placeholder: '请输入员工手机号',
            type: 'input',
        },
        status: {
            label: '申请状态',
            prop: 'status',
            value: '',
            placeholder: '请选择申请状态',
            type: 'select',
            options: [
                {label: '待审核', value: 0},
                {label: '已通过', value: 1},
                {label: '已驳回', value: 2}
            ],
        }
    }
})

const tableHeader = ref([
    {
        label: '职工姓名',
        prop: 'userName',
        width: 80
    },
    {
        label: '原手机号',
        prop: 'originPhone',
        width: 130
    },
    {
        label: '身份证号',
        prop: 'idCardNo',
        width: 190
    },
    {
        label: '身份证正面',
        prop: 'idCardFront',
        width: 80
    },
    {
        label: '本人照片',
        prop: 'userPhoto',
        width: 80
    },
    {
        label: '注册时间',
        prop: 'registTime',
        width: 170
    },
    {
        label: '最后活跃时间',
        prop: 'loginTime',
        width: 170
    },
    {
        label: '申述理由',
        prop: 'applyRemark',
        width: 190
    },
    {
        label: '申述时间',
        prop: 'createTime',
        width: 170
    },
    {
        label: 'openID',
        prop: 'openId'
    },
    {
        label: 'userID',
        prop: 'userId',
        width: 80
    },
    {
        label: '联系方式',
        prop: 'phone',
        width: 130
    },
    {
        label: '申请状态',
        prop: 'status',
        width: 80,
        fixed: 'right'
    },
    {
        label: '操作',
        prop: 'operate'
    }
])

const statusMap = ref({
    0: {
        text: '待审核',
        color: '#3E5FF5'
    },
    1: {
        text: '已通过',
        color: '#9497B1'
    },
    2: {
        text: '已驳回',
        color: '#F56C6C'
    }
})

const tableData = ref<LogoutRecordDto[]>([])

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const showReject = ref(false)
const recordId = ref()

const showCancellation = ref(false)

const statusColor = computed(() => {
    return (status: number) => {
        return statusMap.value[status as keyof typeof statusMap.value].color
    }
})

const getList = async () => {
    const query = getFilterDataValue(filterData.value)
    const res = await getLogoutRecordList({
        ...query,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    })

    res.list.forEach((i) => {
        i.registTime = i.registTime ? dayjs(i.registTime).format('YYYY-MM-DD HH:mm') : ''
        i.loginTime = i.loginTime ? dayjs(i.loginTime).format('YYYY-MM-DD HH:mm') : ''
        i.createTime = i.createTime ? dayjs(i.createTime).format('YYYY-MM-DD HH:mm') : ''
    })

    tableData.value = res.list
    pageInfo.value.total = res.totalCount
}

const onAgree = async (id: number) => {
    ElMessageBox.confirm('确定注销吗？', '提示').then(async () => {
        await agreeLogout({
            id
        })
        getList()
    })
}

const onReject = async (id: number) => {
    recordId.value = id
    showReject.value = true
}

const onSearch = () => {
    getList()
}

const onPageChange = (ev: {
    pageNum: number
    pageSize: number
}) => {
    pageInfo.value.pageNum = ev.pageNum
    pageInfo.value.pageSize = ev.pageSize
    getList()
}

const onShowManual = () => {
    showCancellation.value = true
}

onMounted(() => {
    getList()
})
</script>
<style lang="scss" scoped></style>
